<template>
  <div  style="background:#F0FFFF">
    <el-row>
      <el-col :span="24">
        <third-register></third-register>
      </el-col>
    </el-row>


   <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')" style="box-shadow:1px 1px 5px #888888;">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
           <el-tag effect="plain"  type="warning"> 实有人口</el-tag>
          </div>
          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')" style="box-shadow:1px 1px 5px #888888;">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="table" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            <el-tag effect="plain">实有房屋</el-tag>
          </div>
          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')" style="box-shadow:1px 1px 5px #888888;">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="message" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
           <el-tag type="danger"> 待受理</el-tag>
          </div>
          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')" style="box-shadow:1px 1px 5px #888888;">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="eye-open" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            <el-tag type="success">已受理</el-tag>
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>

<el-row>
      <el-col :span="24">
        <div style="box-shadow:1px 1px 5px #888888;">
        <basic-container >
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-card class="box-card">
              <div slot="header" class="clearfix" >
                <el-tag>地区事件统计</el-tag>
              </div>
                 <div style="width:100%;height:540px" ref="chart2"></div>
            </el-card>
          </el-collapse>
        </basic-container>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8"  class="panel-group">
        <div style="box-shadow:1px 1px 5px #888888;">
        <basic-container>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-card class="box-card">
              <div slot="header" class="clearfix" >
                 <el-tag>平台公告</el-tag>
                <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
              </div>
              <el-table :data="noteList" style="width: 100%;padding-top: 15px;height:510px">
                  <el-table-column label="标题" >
                    <template slot-scope="scope">
                     <a @click="handleKipCheck(scope.row)" style="color:#318ed4;cursor:pointer">  {{ scope.row.title | titleFilter }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column label="发布时间" width="110" align="center">
                    <template slot-scope="scope">
                    {{ scope.row.date }}
                    </template>
                  </el-table-column>
                  <el-table-column label="发布人" width="100" align="center">
                     <template slot-scope="scope">
                        {{ scope.row.user }}
                    </template>
                  </el-table-column>
                </el-table>
            </el-card>
          </el-collapse>
        </basic-container>
        </div>
      </el-col>
      <el-col :span="8"  class="panel-group">
         <div style="box-shadow:1px 1px 5px #888888;">
        <basic-container>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-card class="box-card">
              <div slot="header" class="clearfix" >
                <el-tag>我的待办</el-tag>
                <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
              </div>
                <el-table :data="dBList" style="width: 100%;padding-top: 15px;height:510px">
                  <el-table-column label="事件" >
                    <template slot-scope="scope">
                      <a @click="handleKipCheck(scope.row)" style="color:#318ed4;cursor:pointer"> {{ scope.row.title | titleFilter }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column label="日期" width="110" align="center">
                    <template slot-scope="scope">
                    {{ scope.row.date }}
                    </template>
                  </el-table-column>
                  <el-table-column label="类型" width="100" align="center">
                    <template slot-scope="{row}">
                      <el-tag :type="row.type | statusFilter">
                        {{ row.type }}
                      </el-tag>
                    </template>
                  </el-table-column>
                </el-table>
            </el-card>
          </el-collapse>
        </basic-container>
         </div>
      </el-col>
      <el-col :span="8"  class="panel-group">
        <div style="box-shadow:1px 1px 5px #888888;">
        <basic-container >
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-card class="box-card">
              <div slot="header" class="clearfix" >
                <el-tag>地区数据统计</el-tag>
              </div>
                 <div style="width:100%;height:510px" ref="chart"></div>
            </el-card>
          </el-collapse>
        </basic-container>
        </div>
      </el-col>
      </el-row>
      <el-row>
     
    </el-row>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import CountTo from 'vue-count-to'
  const echarts = require('echarts');
  export default {
     filters: {
        filters: {
        typeFilter(type) {
          const typeMap = {
            success: '矛盾排查',
            pending: '事件上报'
          }
          return typeMap[type]
        },
        titleFilter(str) {
          return str.substring(0, 10)
        }
      },

    },
    components: {
      CountTo
    },
    name: "wel",
   
    data() {
      return {
        activeNames: ['1', '2', '3', '5'],
        logActiveNames: ['16'],
        dBList:[
          {"title":"张三邻居矛盾调解","date":"2020-10-11","type":"矛盾排查"},
          {"title":"公共绿化植物遭破坏举报","date":"2020-10-21","type":"事件上报"},
          {"title":"上访人员处理失当","date":"2020-10-12","type":"矛盾排查"},
          {"title":"青岛返济人员拒绝配合核酸检测","date":"2020-10-23","type":"事件上报"},
          {"title":"邻里矛盾处理","date":"2020-10-24","type":"矛盾排查"},
          {"title":"环评通知公告被撕毁事件举报","date":"2020-10-25","type":"矛盾排查"}
        ],
        noteList:[
          {"title":"系统上线注意事项","date":"2020-10-11","user":"系统管理员"},
          {"title":"人口普查进度报告","date":"2020-10-21","user":"系统管理员"},
          {"title":"新冠肺炎防治专题","date":"2020-10-12","user":"系统管理员"},
          {"title":"加强管理境外人员入境核查","date":"2020-10-23","user":"系统管理员"},
          {"title":"青岛入济人员排查通知","date":"2020-10-24","user":"系统管理员"},
          {"title":"乌鲁木齐喀什地区返济人员隔离处置通告","date":"2020-10-25","user":"系统管理员"}
        ]
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
  
    methods: {
      handleChange(val) {
        window.console.log(val);
      },
    initCharts () {
      let myChart = echarts.init(this.$refs.chart, "light");
      
      // 绘制图表
      myChart.setOption({
            title: {
                text: '地区人口总量',
                subtext: '数据来自网格'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['2019年', '2020年']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['特殊人群', '外籍人口', '流动人口', '户籍人口', '总人口']
            },
            series: [
                {
                    name: '2019年',
                    type: 'bar',
                    data: [ 23489, 29034, 104970, 131744, 630230]
                },
                {
                    name: '2020年',
                    type: 'bar',
                    data: [ 23438, 31000, 121594, 134141, 681807]
                }
            ]
        });

        let myChart2 = echarts.init(this.$refs.chart2);
        // 绘制图表
        myChart2.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['事件总数', '已办事件数', '未办事件数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '事件总数',
                        type: 'bar',
                        data: [320, 332, 301, 334, 390, 330, 590, 390, 330, 320, 332, ],
                        markLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        data: [
                            [{type: 'min'}, {type: 'max'}]
                        ]
                        }
                    },
                    {
                        name: '已办事件数',
                        type: 'bar',
                        data: [120, 200, 111, 134, 90, 230, 210,500, 200, 111, 134,  ]
                    },
                    {
                        name: '未办事件数',
                        type: 'bar',
                        data: [200, 132, 190, 234, 290, 330, 310,90, 132, 190, 234,]
                    },
                    
                ]
                  });

      }
    },


    mounted () {
      this.initCharts();
    }
  };
</script>

<style lang="scss" scoped>
  // .el-font-size {
  //   font-size: 14px;
  // }
  .panel-group {
  margin-top: 5px;

  .card-panel-col {
    margin-bottom: 18px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>

